<template>
  <!-- 商品评价 -->
  <div class="item-comment">
    <div class="commentList"
         v-if="lists.length>0">
      <van-list v-model="loading"
                :finished="finished"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="onLoad">
        <div v-for="(item, index) in lists"
             :key="index"
             class="item">
          <div class="detail-comment" v-if="params.is_try!=1">
            <div class="comment_top">
              <div class="comment_head_img">
                <img :src="item.head_portrait" alt="">
              </div>
              <div class="comment_score">
                <b>{{item.mobile}}</b><br/>
                <img :src="item.describe_star" alt="" mode="scaleToFill">
              </div>
              <div class="comment_time">{{item.create_time}}</div>
            </div>
            <div class="comment_contents">
              <p v-if="item.comment.comlist.detail.length>0">{{item.comment.comlist.detail}}</p>
              <div class="comment_img" v-if="item.comment.imglist.length>0">
                <img :src="img" @click="imgPreview(i, item.comment.imglist)" alt="" v-for="(img,i) in item.comment.imglist" :key="i">
              </div>
            </div>

            <div  class="comment_bottom" v-if="item.sku_name && item.sku_name !=''">
              <span>{{item.prop_name}}</span><i>{{item.sku_name}}</i>
            </div>
            <div class="reply" v-if="item.reply"><b>回复：</b>{{item.reply}}</div>
            <div class="add_comlist" v-if="item.comment.add_comlist && item.add_status == 0">
              <p class="add_label">用户{{item.comment.add_comlist.cha_days}}天后追加</p>
              <p>{{item.comment.add_comlist.detail}}</p>
              <div class="comment_img">
                <img :src="img" alt="" v-for="(img,i) in item.comment.add_imglist" @click="imgPreview(i, item.comment.add_imglist)" :key="i">
              </div>
            </div>
            <div class="add_imglist" v-if="item.comment.add_imglist>0">
              <img width="55" height="55" @click="imgPreview(i, item.comment.add_imglist)" class="J-comimg" :src="img" alt="" v-for="(img,i) in item.comment.add_imglist" :key="i">
            </div>
          </div>
          <div class="j-detail-comment" v-else-if="params.is_try==1">
            <div class="comment_top">
              <span class="comment_head_img">
                <img :src="item.head_portrait" alt="">
              </span>
              <span class="comment_score">
                <b>{{item.mobile}}</b>
              </span>
              <span class="comment_time">{{item.create_time}}</span>
            </div>
            <div class="comment_contents">
              <p v-if="item.detail.length>0">{{item.detail}}</p>
            </div>
        </div>
        </div>
      </van-list>
    </div>
    <div v-else>
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
  import noData from '@/components/noData/index'
  import { getItemComment } from '@/api/item/item'
  export default Vue.extend({
    name: 'index',
    components: {
      noData
    },
    data() {
      return {
        noData: {
          text: '暂无评价',
          img: 'https://img.wifenxiao.com/h5-wfx/images/user/no-data.png',
          width: '214px',
          marginTop: '120px',
          txtMarginTop: '-30px'
        },
        params: {
          item_id: '',
          is_try: 0,
          p: 1
        },
        lists: [],
        loading: false,
        error: false,
        finished: false
      }
    },
    mounted() {
      // 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
    },
    methods: {
      init() {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)

        getItemComment(this.params).then(res => {
          this.loading = false
          this.$loadingWrap.close()
          if (res.status == 1) {
            if (res.data.lists.length > 0) {
              this.lists = res.data.lists
              this.params.p++
            } else {
              this.finished = true
            }
          } else {
            this.$Error(res.msg)
          }
        })
      },
      // 加载更多
      onLoad() {
        if (this.finished) { return false }
        getItemComment(this.params).then(res => {
          this.loading = false
          if (res.status == 1) {
            if (res.data.lists.length > 0) {
              this.lists.push(...res.data.lists)
              this.params.p++
            } else {
              this.finished = true
            }
          } else {
            this.$Error(res.msg)
          }
        }).catch(() => {
          this.error = true
        })
      },
      imgPreview(index, imgList) {
        var imgUrl = imgList[index]; //获取当前点击的图片
        var imgArr = imgList;
        wx.previewImage({
          current: imgUrl, //当前图片地址
          urls: imgArr,  //所有要预览的图片的地址集合数组形式
        })
      }
    },
    created() {
      this.params.item_id = this.$route.query.id
      this.params.is_try = this.$route.query.isTry
      this.init()
    }
  })
</script>

<style lang="scss">
.item-comment{
  padding:24px;
  .item{
    margin-bottom:20px;
    padding:24px;
    border-radius:20px;
    background:#fff;
  }  
  .detail-comment{
    line-height:1.5;
    .comment_top{
      display:flex;
      align-items:center;
      .comment_head_img{
        overflow:hidden;
        width:66px;
        height:66px;
        margin-right:14px;
        border-radius:50%;
        img{
          display:block;
          width:100%;
        }
      }
      .comment_score{
        flex:1;
        b{
          word-break:break-all;
        }
        img{
          width: 112px;
          height:16px;
          margin-top:8px;
        }
      }
      .comment_time{
        color:#999;
      }
    }
    .comment_contents{
      margin-top:16px;
      font-size:26px;
      p{
        line-height:1.5;
      }
      .comment_img{
        margin-top:10px;
        display:flex;
        flex-wrap:wrap;
        img{
          width:206px;
          height:206px;
          margin-top:10px;
          margin-right: 15px;
          &:nth-child(3n){
            margin-right: 0;
          }
        }
      }
    }
    .comment_img,.add_imglist{
      margin-top:10px;
      display:flex;
      flex-wrap:wrap;
      img{
        width:206px;
        height:206px;
        margin-top:10px;
        margin-right: 15px;
        &:nth-child(3n){
          margin-right: 0;
        }
      }
    }
    .comment_bottom{
      margin-top:10px;
      font-size:24px;
      color:#999;      
    }
    .reply{
      margin-top:10px;
      b{
        color:#F30C23
      }
    }
    .add_comlist{
      margin-top:10px;
      font-size:26px;
      .add_label{
        color:#F30C23;
      }
    }
  }
}
</style>
